class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            cate: [],
            name: '',
            pwd: '',
            confirmpwd: '',
            role: '',
            id: 0,
            start: 0,
            pagesize: 15,
            counts: [],
            keyword: '',
            cid: 0,
            interestcid: 0,
            viewcid: 0,
            integral:-1,
            growth:-1,
            quantity:-1,
            starttime:'',
            endtime:'',
            ismoreshow:-1,
            ischa:!1,
        };
    }

    formatlist(list) {
        var listitem = [], { ismoreshow } = this.state, rolename = '';
        list.forEach((x, i) => {
            listitem.push(
                <tr key={i}>
                     <td className="tconter">{x.item.id}</td>
                    <td>
                        <div className="customer">
                            <img src={x.item.avatarUrl} />
                            <p>{x.item.nickName}</p>
                        </div>
                    </td>
                    <td>{x.item.openId}</td>
                    <td>{x.item.phone==null?"无":x.item.phone}</td>
                    <td>{x.item.type == "CONSUMER" ? "普通用户" :"VIP"}</td>
                    <td>{x.address==null?"无":x.address.phone}</td>
                    <td>{x.address==null?"无":x.address.province+x.address.city+x.address.countyName+x.address.info}</td>
                    <td className="operatebox">
                        <div className='operate' id={"ope" + x.item.id}>
                            <div>
                                <img src="./src/del.png" />
                                <p className='edit colred' onClick={this.del.bind(this, x.item.id)}>删除</p>
                            </div>


                        </div>
                    </td>
                    <td className="tconter">{x.agent}</td>
                </tr>
            )
        });
        this.setState({ listitem, list, originallist: list })
    }

    // 删除
    del(e) {
        this.setState({ delid: e }, () => {
            $('#myModal').modal('toggle');
        })
    }
    confirmdel() {
        let { delid, start } = this.state
        deluser(delid, res => {
            if (res.issuccess == 1) {
                alert('删除成功')
                $('#myModal').modal('toggle');
                this.freshlist(start)
            } else {
                $('#myModal').modal('toggle');
                alert(res.msg);
            }
        })
    }


    componentDidMount() {
        this.freshlist(0)
    }
    freshlist(start) {
        let { pagesize,keyword } = this.state;
        getuserslist({ start,pagesize,keyword }, res => {
            if (res.issuccess == 1) {
                if (start == 0) {
                    let pagecount = Math.ceil(res.total / pagesize);
                    this.setpager(pagecount, start);
                    this.setState({ start,total:res.total })
                }
                this.formatlist(res.list);
            }
        })

    }
    setpager(pagecount, start) {
        let counts = [];
        for (let i = 1; i < pagecount + 1; i++) {
            counts.push(start + i)
        }
        this.setState({ counts, pagestart: 0 })
    }
    clickpage(e) {
        let { start, pagesize } = this.state
        start = e * pagesize
        this.setState({ pagestart: e, start }, () => {
            this.freshlist(start)
        })
    }
    setpage(e) {
        let { pagesize, start } = this.state
        pagesize = parseInt(e)
        start = 0
        this.setState({ pagesize, start }, () => {
            this.freshlist(start)
        })
    }

    inputchange(prop, e) {
        console.log(prop, 'prop')
        console.log(e.target.value, 'eeee')
        // let { target } = this.state;
        // target[prop] = e.target.value
        // this.setState({ target })
        this.setState({ [prop]: e.target.value })
    }
    sortlist(e){
        let {integral,growth,quantity,list}=this.state
        console.log(e,'eeee');
        if(e=='integral'){
            if(integral==-1){
                integral=0
            }
            this.setState({growth:-1,quantity:-1})
                if(integral==0){
                    list.sort((a,b)=>{
                        return a.item.points-b.item.points
                    })
                    this.setState({list,integral:1},()=>{
                        this.formatlist(list);
                    })
                }else{
                    list.sort((a,b)=>{
                        return b.item.points-a.item.points
                    })
                    this.setState({list,integral:0},()=>{
                        this.formatlist(list);
                    })
                }
           
        }else if(e=='growth'){
                if(growth==-1){
                    growth=0
                }
                this.setState({integral:-1,quantity:-1})
            if(growth==0){
                list.sort((a,b)=>{
                    return a.item.growth-b.item.growth
                })
                this.setState({list,growth:1},()=>{
                    this.formatlist(list);
                })
            }else{
                list.sort((a,b)=>{
                    return b.item.growth-a.item.growth
                })
                this.setState({list,growth:0},()=>{
                    this.formatlist(list);
                })
            }
        }else if(e=='quantity'){
            if(quantity==-1){
                quantity=0
            }
            this.setState({integral:-1,growth:-1})
            if(quantity==0){
                list.sort((a,b)=>{
                    return a.usersharecount-b.usersharecount
                })
                this.setState({list,quantity:1},()=>{
                    this.formatlist(list);
                })
            }else{
                list.sort((a,b)=>{
                    return b.usersharecount-a.usersharecount
                })
                this.setState({list,quantity:0},()=>{
                    this.formatlist(list);
                })
            }
        }
    }
    add() {
        $('#modalOne').modal('toggle');
    }
    onselectchange(prop,e) {
        let { cid,interestcid,viewcid, start } = this.state, estate = e.target.value;
        console.log(prop,'propprop');
        console.log(estate,'estateestate');
        
        if(prop=="cid"){
            if (cid == estate) return;
            this.setState({ cid: estate }, () => {
                this.freshlist(start, estate)
            })
        }else if(prop=="interestcid"){
            if (interestcid == estate) return;
            this.setState({ interestcid: estate }, () => {
                this.freshlist(start, estate)
            })
        }else if(prop=="viewcid"){
            if (viewcid == estate) return;
            this.setState({ viewcid: estate }, () => {
                this.freshlist(start, estate)
            })
        }
    }
    inputschange(e) {
        console.log(e.target.value)
        var txt = e.target.value;
        this.setState({
            keyword: e.target.value
        })
    }
    reset() {
        this.setState({ keyword: '' },()=>{
            this.freshlist(0);
        });
    }
    cha() {
        var { keyword,start  } = this.state;
        if(keyword=='')return;
        this.freshlist(0)
        // var keyword = keyword
        // usersearch(keyword, res => {
        //    if(res.issuccess==1){
        //     if (res.list) {
        //         if (start == 0) {
        //             let pagecount = Math.ceil(res.total / pagesize);
        //             this.setpager(pagecount, start);
        //             this.setState({ start, total: res.total,ischa:!0 })
        //         }
        //         this.formatlist(res.list);
        //         // this.setState({showswitch:!1})
        //     }
        //    }
        // })
    }
    render() {
        let { listitem, counts, pagestart, keyword, selecthtml, interesthtml, viewhtml, integral,quantity, growth, starttime, endtime } = this.state;

        return (
            <div className="breadLinebox">
                <Modal content='确定要删除吗？' click={this.confirmdel.bind(this)} />
                <div className='content_wrap panel-default content_wrap'>
                    <div className="breadLine">
                        <div className="img">
                        当前位置 > 用户管理
                        </div>
                    </div>
                    <div className="content">
                    <div className="search">
                            <input onChange={this.inputschange.bind(this)} value={keyword} type="text" placeholder='请输入用户电话号码' />
                            <p className="add" onClick={this.cha.bind(this)}>查询</p>
                            <p className="add" onClick={this.reset.bind(this)}>返回</p>
                        </div>
                        {/* <div className="tabletitbox">
                            <div className="tabletit inputbox">
                                <div className="search">
                                    <input onChange={this.searchinput.bind(this)} value={keyword} type="text" placeholder='请输入昵称或电话' className />
                                    </div> 
                                    </div> 
                                    <div className="inputbox">
                                        <span>绑定日期</span>
                                        <input type="text" id="test1" placeholder='请选择开始日期' value={starttime} className="input" />
                                        <span>-</span>
                                        <input type="text" id="test2" placeholder='请选择结束日期' value={endtime} className="input" />
                                    </div>
                                    <div className="tabletit inputbox">
                                    <div className="search">
                                    <p onClick={this.search.bind(this)}>查询</p>
                                    <p onClick={this.reset.bind(this)}>返回</p>
                                    </div>
                                    </div>

                        </div>
                        <div className="selectbox">
                            <div className="selectitem">
                                <span>会员等级</span>
                                <div className="select">
                                    <select value={this.state.cid} onChange={this.onselectchange.bind(this,"cid")} className="form-control select">
                                        {selecthtml}
                                    </select>
                                </div>
                            </div>
                            <div className="selectitem">
                                <span>兴趣标签</span>
                                <div className="select">
                                    <select value={this.state.interestcid} onChange={this.onselectchange.bind(this,'interestcid')} className="form-control select">
                                        {interesthtml}
                                    </select>
                                </div>
                            </div>
                            <div className="selectitem">
                                <span>浏览标签</span>
                                <div className="select">
                                    <select value={this.state.viewcid} onChange={this.onselectchange.bind(this,'viewcid')} className="form-control select">
                                        {viewhtml}
                                    </select>
                                </div>
                            </div>
                        </div> */}
                        {/* <div className="tabletit">
                            <p className="add" data-toggle="modal" data-target="#modalOne" onClick={this.add.bind(this)}>新建</p>
                        </div> */}
                        <table className="tab">
                            <thead>
                                <tr>
                                    <th className="tconter">用户ID</th>
                                    <th className="tconter">用户昵称</th>
                                    <th>openid</th>
                                    {/* <th className="tconter">员工姓名</th> */}
                                    <th>电话</th>
                                    <th>身份</th>
                                    <th>地址电话</th>
                                    <th>用户地址</th>
                                    {/* <th>会员等级</th> */}
                                    {/* <th><p>积分<img src={`./src/${integral==-1?'sortlist':integral==0?'top':'bottom'}.png`} onClick={this.sortlist.bind(this,'integral')}/></p></th>
                                    <th><p>成长值<img src={`./src/${growth==-1?'sortlist':growth==0?'top':'bottom'}.png`} onClick={this.sortlist.bind(this,'growth')}/></p></th> */}
                                    {/* <th>地区</th> */}
                                    {/* <th>兴趣标签</th> */}
                                    {/* <th><p>拉新数量<img src={`./src/${quantity==-1?'sortlist':quantity==0?'top':'bottom'}.png`} onClick={this.sortlist.bind(this,'quantity')}/></p></th> */}
                                    {/* <th>储值</th>
                                    <th>绑定日期</th> */}
                                    <th className="cz tconter">操作</th>
                                    <th className="tconter">代理</th>
                                </tr>
                            </thead>
                            <tbody>
                                {listitem}
                            </tbody>
                        </table>
                        <div className="pagerbox">
                            <p>共{this.state.total}条</p>
                            <Pager counts={counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={pagestart} />
                        </div>
                    </div>
                </div>
            </div>


        )


    }
}





ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            <LeftMenu code='user' />
            <Main />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)